<template>
    <div class="timeline">
        <div v-for="(event, idx) in events" :key="idx" class="timeline-item"
            :class="{ left: idx % 2 === 0, right: idx % 2 === 1 }">
            <div class="content">
                <h3>{{ event.year }}</h3>
                <h4>{{ event.title }}</h4>
                <p>{{ event.desc }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    events: Array
})

</script>

<style scoped>
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #ccc;
}

.timeline-item {
    width: 45%;
    padding: 10px 20px;
    position: relative;
    margin-bottom: 20px;
}

.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 55%;
}

.timeline-item .content {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>